<template>
    <div id="building">
      <div class="top">
        <div class="top1">
            <div class="left1">
            <el-link href="https://element.eleme.io" target="_blank">关于头条</el-link>
            <el-link href="https://element.eleme.io" target="_blank">反馈</el-link>
            <el-link href="https://element.eleme.io" target="_blank">侵权投诉</el-link>
            </div>
            <div class="right2" v-show="this.flag1">
            <!-- <div style="display: flex;width: 100px;" >
            <span >{{ this.name }}</span>    
            </div>  
            <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>       
            <el-button type="primary" round @click="deleteinfo()" >退出登录</el-button> -->
            <img :src=this.circleUrl class="avatar">
            <el-dropdown style="font-size: 18px;margin-top: 5px;"  @command="handleCommand">
            <span class="el-dropdown-link">
                {{this.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item  command="a" v-show="this.UserClass==2">个人主页</el-dropdown-item>
                <el-dropdown-item  command="b" v-show="this.UserClass==1">发布新闻</el-dropdown-item>
                <el-dropdown-item  command="d" v-show="this.UserClass==0">管理端</el-dropdown-item>
                <el-dropdown-item  command="c">退出登录</el-dropdown-item>
               
            </el-dropdown-menu>
            </el-dropdown>
            </div>
        </div>
        <div class="title1">
            <h1 class="t1"><b>今日头条</b></h1>
        </div>
        <div class="search">
            <div style="margin-top: 15px;" class="contain">
                <el-input placeholder="请输入内容" v-model="input" class="input" clearable>
                <el-button slot="append" icon="el-icon-search" @click="changeinfo()"></el-button>
                </el-input>
            </div>
        </div>
        <div style="margin-top: 10px;">
        
            <el-link icon="el-icon-position" class="el-link" type="danger">
                热搜:
                <span>静怡离婚乌龙事件</span>
            </el-link>
            
        </div>
        
      </div>  


      <div class="bottom">
        <div class="left" v-if="flag==1">
         <div id="news-list">
            <el-tabs v-model="column" @tab-click="handleClick" stretch="true">
                <el-tab-pane label="关注" name="关注">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>

                </el-tab-pane>
                <el-tab-pane label="推荐" name="推荐">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">
                                
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                    
                                        
                                    </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>
                                    
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>

                </el-tab-pane>
                <el-tab-pane label="财经" name="财经">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>
                </el-tab-pane>
                <el-tab-pane label="体育" name="体育">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>

                </el-tab-pane>
                <el-tab-pane label="国际" name="国际">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>

                </el-tab-pane>
                <el-tab-pane label="科技" name="科技">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>

                </el-tab-pane>
                <el-tab-pane label="娱乐" name="娱乐">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>

                </el-tab-pane>
                <el-tab-pane label="更多" name="更多">
                    <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>



                </el-tab-pane>
            </el-tabs>
         </div>
        </div>
        <div class="left" v-else style="margin-left: 230px;text-align: left;">
         
            <h3 style="color: rgb(28, 173, 213);font-size: 22px;" v-if="this.List.length!=0" >搜索到以下内容</h3>
            <!-- <h3 style="color: rgb(28, 173, 213);" v-if="this.List.length!=0">搜索到以下内容</h3> -->
            <el-button size="small" round type="success" @click="change()">返回推荐</el-button>
            <div style="display: flex;flex-wrap: wrap;
                                    justify-content: flex-start;" v-if="this.List.length!=0">
                                <li  v-for="item in List" :key="item" class="li-item" @click="getdetail(item.new_id)" style="border-bottom:1px solid #bde1ef;">
                                <div style="display: flex;width: 800px;text-align: left;margin-left: 50px;margin-right: 20px;">                   
                                    <div style="flex:2">
                                        {{ item.new_title}}
                                        <br>
                                        <br>
                                        <div style="margin-top: 45px;margin-bottom: 5px;">
                                            <el-avatar v-if="item.avtar!=null" :src="item.avtar" style="width: 30px;height: 30px; object-fit: cover;"/>
                                            <el-avatar v-else :src=circleUrl style="width: 30px;height: 30px; object-fit: cover;"/>
                                            
                                            {{  item.username }}
                                            发布于：
                                            {{ item.new_time.split("T")[0] }}
                                        {{ item.new_time.split("T")[1].split(".")[0] }}
                                        </div>
                                </div> 
                                    <div style="flex:1;">
                                        <img v-if="item.picture_src" :src=item.picture_src style="width: 210px;height: 110px; object-fit: cover;"/>
                                        <img v-else src='../assets/default.png' style="width: 210px;height: 110px; object-fit: cover;"/>                       
                                    </div>
                                </div>
                                </li>
                                </div>
                            <div v-else> <p style="margin-top: 25%;margin-left: 45%;">暂无数据，换个关键词试试吧~</p></div>
                                    
        </div>
        <div class="right">
            <div id="login-status1" v-show="!this.flag1">
                <br>
                <h2 style="margin-top: 40px;margin-bottom: 10px;">登陆后，头条更懂你</h2>
                <h2 style="margin-bottom: 15px;">内容更有趣哦</h2>
                <el-button type="primary" icon="el-icon-user" @click="toLogin()" round>立即登录</el-button>
                
            </div>
            <div id="login-status2" v-show="flag1">
                <div id="show-info">
                    <div class="block"  @click="toMyPage()"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                </div>
                <br>
                <h3 style="font-size: 21px;margin-top: 25px;">你好,{{this.name}}</h3>
            </div>
            <div style="width: 300px;height: 400px;text-align: left;margin-top: 80px;border-radius: 15px;margin-left: 50px;box-shadow: 0 2px 2px rgba(104, 147, 174, 0.473), 0 0 6px rgba(0, 0, 0, .04);">
              <!-- <img src="../assets/fire.jpg" style="width: 50px;height: 50px;"/> -->
              <!-- <el-link icon="el-icon-bell" class="el-link" type="danger">
                热搜:
                <span>静怡离婚乌龙事件</span>
            </el-link> -->
            <br>
            <h3 style="color: red;margin-top: 0px;margin-left: 10px;position: relative;font-size: 21px;margin-bottom: 5px;">头条热榜
          
            <el-link icon="el-icon-refresh-right" style="margin-left: 100px;">换一换</el-link></h3>
            <div style="display: flex;flex-wrap: wrap;margin-left: 15px;margin-right: 15px;margin-top: 10px;
                                    justify-content: flex-start;" v-if="this.List1.length!=0">
                                <li  v-for="(item,index) in List1" :key="item" class="li-item" @click="getdetail(item.new_id)" style="display:inline-block;height: 30px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px;">
                                {{index+1}}.{{ item.new_title }}                   
                                    
                                </li>
                                </div>
                                <div v-else> <p style="margin-top: 25%;">暂无数据</p></div>


            </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
           circleUrl:localStorage.getItem("avtar"),
           input:'',
           flag:1,//是否搜索
           flag1:this.$store.getters.getIsLogin,
          // flag1:!(localStorage.getItem("IsLogin")),  //有个“”
           UserClass:this.$store.getters.getuserClass, 
           name:localStorage.getItem("userName"),
           user_id:localStorage.getItem("userId"),
           List:[],
           List1:[],
          column:'推荐',
        };
    },
    created()
    {

        this.getnews(this.column)
    },
    watch:{
        column:{
		handler(newVal){
			console.log(newVal);
            this.getnews(newVal)
		},
		deep: true
	}
    },
    methods: {
        change(){
            this.flag=1;
            this.input=''
            this.getnews('推荐')
        },
        getnews(index)
        {
            this.$axios
                        .get(`/api/news/getDifferentSortNews?new_column=${index}`)
                        .then((res) => {
                        console.log(res);
                        this.List1=res.data
                        this.List=res.data
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });

        },
        handleClick(tab, event) {
        console.log(tab, event);
      },
        handleCommand(command) {
            if(command=='a')
             {   
                // this.getInformation()
                this.toMyPage()
            }
                // this.$message('click on item ' + command);
            else if(command=='b')
                this.toPublisher();
            else if(command=='d')
                this.toManager();
            else
                this.deleteinfo()

        },
        toManager()
        {
            this.$router.push('/user/user')
        },
        toPublisher()
        {
            this.$router.push('/publisher')
        },
        changeinfo()
        {
            this.flag=0;
            this.research()

        },
        research()
        {
            console.log(this.input);
            this.$axios
                        .get(`/api/news/getUserFindNews?new_title=${this.input}`)
                        .then((res) => {
                        console.log(123131321+res.data);
                       this.List=res.data;
                        
                    
                    })
                        .catch((err) => {
                        console.warn(err);
                    });
        },
       toLogin()
        {
            this.$router.push({name:'MyLogin'})
        },
        toMyPage()
        {
            this.$router.push({name:'MyPage'})
        },
        deleteinfo()
        {
            this.$store.dispatch("setuserId",'');
            this.$store.dispatch("setuserName",'');
            this.$store.dispatch("setuserClass",'');
            this.$store.dispatch("setIsLogin",false); 
            localStorage.setItem("IsLogin",false);
            localStorage.setItem("userId", '');
            localStorage.setItem("userName", '');
            localStorage.setItem("userClass", '');
            this.flag1=!this.flag1;
 

        }
    },

    mounted(){
    if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
     
    }
  },


};
</script>
<style>
 #building{

  width:100%;
  padding: 0;
}
.top{
    height: 340px;
    background-image: url(../assets/imgs/top.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.title1
{
    width: 100%;
    height: auto;
    padding-top: 40px
}
.t1{
    font: 46px "微软雅黑"; /*设置字体和字体大小*/
	margin:20px auto; /*设置元素外边距*/
	font-weight: 300; /*设置字体粗细*/
	text-align: center; /*设置文字居中*/
	color: #4a94e3; /*设置文字颜色*/
  letter-spacing: 0.2em;/*设置文字间距*/ 
  
  /* -webkit-animation:bounce 2s infinite; */
  /*设置动画*/
	}
.contain{
    position: relative;
    left: 35%;
    width: 500px;

}
.el-link{
    position: relative;
    left: -5%;
    margin-left: 30px;
}
.bottom{
    display: flex;
    height: 800px;

}
.right2{

    padding: 10px;
    width: 200px;
    margin-left: auto;
   display: flex;
   margin-right: 100px;
}
.left{
    margin: 20px;
    flex: 2;
    
}
.right{
    margin: 10px;
   /* box-shadow: 0 2px 4px rgba(104, 147, 174, 0.473), 0 0 6px rgba(0, 0, 0, .04); */
    flex: 1;
}
#news-list{
    /* background-color:rgb(124, 176, 235); */
    margin-left: 150px;
    width:850px ;
    height: 800px ;
}
#login-status1{
    width: 350px;
    margin-top: 20px;
    background-image:url(../assets//imgs/login-status.png);
    margin-left: 20px;
    height: 200px;
    border-radius: 20px;

}
#login-status2{
    width: 350px;
    margin-top: 20px;
    margin-left: 20px;
    height: 200px;
    box-shadow: 0 2px 4px rgba(104, 147, 174, 0.473), 0 0 6px rgba(0, 0, 0, .04);
   
    border-radius: 20px;

}
#show-info{
    position: relative;
    top:20%;
    height: 50px;
    margin: 10px;
    /* background-color: rgb(88, 49, 49); */
}
.left1{
    padding: 10px;
    width: 250px;
    margin-left: 150px;
}
.top1{
    width: auto;
    height: auto;
    display: flex;
}
.avatar{
    width: 36px;
    height: 36px;
    margin-right: 5px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>